// pages/tdesign/tdesign.js
const image = "https://tdesign.gtimg.com/miniprogram/images/example1.png";
// const items = new Array(12).fill({ label: "标题文字", image }, 0, 12);

const items1 = new Array(30).fill({ label: "标题文字1", image }, 0, 30);
const items2 = new Array(30).fill({ label: "标题文字2", image }, 0, 30);
const items3 = new Array(30).fill({ label: "标题文字3", image }, 0, 30);
const items4 = new Array(30).fill({ label: "标题文字4", image }, 0, 30);
const items5 = new Array(30).fill({ label: "标题文字5", image }, 0, 30);
const items6 = new Array(30).fill({ label: "标题文字6", image }, 0, 30);
const items7 = new Array(30).fill({ label: "标题文字7", image }, 0, 30);
const items8 = new Array(30).fill({ label: "标题文字8", image }, 0, 30);
const items9 = new Array(30).fill({ label: "标题文字9", image }, 0, 30);
const items10 = new Array(30).fill({ label: "标题文字10", image }, 0, 30);

Page({
  offsetTopList: [],
  data: {
    sideBarIndex: 1,
    scrollTop: 0,

    categories: [
      {
        label: "选项一",
        title: "标题一",
        badgeProps: {},
        items: items1,
      },
      {
        label: "选项二",
        title: "标题二",
        badgeProps: {
          dot: true,
        },
        items: items2,
      },
      {
        label: "选项三",
        title: "标题三",
        badgeProps: {},
        items: items3,
      },
      {
        label: "选项四",
        title: "标题四",
        badgeProps: {
          count: 6,
        },
        items: items4,
      },
      {
        label: "选项五",
        title: "标题五",
        badgeProps: {},
        items: items5,
      },
      // {
      //   label: "选项六",
      //   title: "标题六",
      //   badgeProps: {},
      //   items: items6,
      // },
      // {
      //   label: "选项七",
      //   title: "标题七",
      //   badgeProps: {
      //     dot: true,
      //   },
      //   items: items7,
      // },
      // {
      //   label: "选项八",
      //   title: "标题八",
      //   badgeProps: {},
      //   items: items8,
      // },
      // {
      //   label: "选项九",
      //   title: "标题九",
      //   badgeProps: {
      //     count: 6,
      //   },
      //   items: items9,
      // },
      // {
      //   label: "选项十",
      //   title: "标题十",
      //   badgeProps: {},
      //   items: items10,
      // },
    ],

    // categories: [
    //   {
    //     label: "选项一",
    //     title: "标题一",
    //     badgeProps: {},
    //     items,
    //   },
    //   {
    //     label: "选项二",
    //     title: "标题二",
    //     badgeProps: {
    //       dot: true,
    //     },
    //     items: items.slice(0, 9),
    //   },
    //   {
    //     label: "选项三",
    //     title: "标题三",
    //     badgeProps: {},
    //     items: items.slice(0, 9),
    //   },
    //   {
    //     label: "选项四",
    //     title: "标题四",
    //     badgeProps: {
    //       count: 6,
    //     },
    //     items: items.slice(0, 6),
    //   },
    //   {
    //     label: "选项五",
    //     title: "标题五",
    //     badgeProps: {},
    //     items: items.slice(0, 3),
    //   },
    // ],
  },
  onLoad() {
    const query = wx.createSelectorQuery().in(this);
    const { sideBarIndex } = this.data;

    query
      .selectAll(".title")
      .boundingClientRect((rects) => {
        this.offsetTopList = rects.map((item) => item.top);
        this.setData({ scrollTop: rects[sideBarIndex].top });
      })
      .exec();
  },
  onSideBarChange(e) {
    const { value } = e.detail;

    this.setData({ sideBarIndex: value, scrollTop: this.offsetTopList[value] });
  },
  onScroll(e) {
    const { scrollTop } = e.detail;
    const threshold = 50; // 下一个标题与顶部的距离

    if (scrollTop < threshold) {
      this.setData({ sideBarIndex: 0 });
      return;
    }

    const index = this.offsetTopList.findIndex(
      (top) => top > scrollTop && top - scrollTop <= threshold
    );

    if (index > -1) {
      this.setData({ sideBarIndex: index });
    }
  },
});
